對話框&三角形

在這個範例中要練習對話框的接版，以及如何用css繪製出三角形

整理幾個重點:

1.將對話框dialog_box寬度設為960px，添加背景色#FFEBF2
2.對話框下方的三角形使用偽元素::after製作，寫成dialog_box::after，使用偽元素要添加content: ''接下來的調整才會顯示
3.在dialog_box::after內添加屬性position: absolute (絕對定位)讓他抽出來獨立一層，偏移至適當的位子，並且在dialog_box::after的父層dialog_box內添加position: relative (相對定位)，作為子層定位的依據
4.font-size調整文字大小，font-weight調整文字厚度，line-height調整行高，letter-spacing調整文字間距，font-style:italic文字設置為斜體
5.對話框下方的三角形可以直接使用css的 border (邊框) 屬性繪製出來，詳細的繪製方法下方補充
6.使用者頭像跟介紹文字的部分，設定display: flex讓資料橫排顯示，align-items: center對齊交錯軸線中央，添加屬性position: relative (相對定位)向左偏移50px，讓畫面更和諧
7.介紹文字的補充文字span標籤，但span是inline物件，使用為了要讓他換行，需要將它設定為display: block讓物件占滿整個空間，即可完成文字換行
8.將img設為100px，添加aspect-ratio製作等比例縮放區塊，讓物件保持固定的寬高比例
9.img要設定width: 100%及消除圖片的預設空白，使用vertical-align屬性設為top(頂部對齊)、middle(垂直居中)、bottom(底部對齊)擇一就可以解決

補充如何繪製出三角形:

1.矩形的邊框使用border來設定，假設要製作一個寬100px的正方形，就添加border: 100px solid
2.並將每個邊框的顏色分開設定才比較清楚觀看效果border-color: red pink orange blue
3.再將height 與 width 設為 0，即可呈現四個正三角形，如下圖(1)
4.接下來假如我們只需要其中一個三角形(例如箭頭向右邊的三角形)，只需要把上、右、下三邊的border顏色改設定為透明transparent即可完成，如下圖(2)

.triangle {
  width: 0;
  height: 0;
  border: 100px solid;
  border-color: red pink orange blue;
}

 .triangle {
  width: 0;
  height: 0;
  border: 100px solid;
  border-color: transparent transparent transparent blue;
  }

想直接看效果可以點擊連結>>>https://codepen.io/ocqyfixe/pen/MWrpGvW

HTML

<div class="container">
    <div class="dialog_box">
        <p>可愛的小白人，進入你的日常生活，是一隻從十幾歲開始寫卡片後會畫的可愛小圖，不知不覺就成了簽名的小標誌...
        </p>
    </div>
    <div class="card">
        <div class="pic">
            <img src="https://i.ibb.co/tK376wg/mini-melon.png">
        </div>
        <div class="txt">
            <h2>小小白人的生活<span>不想上班的小社畜</span></h2>
        </div>
    </div>
</div>

CSS

.container{
    width: 960px;
    padding: 100px 60px;
    margin: auto;
}
.dialog_box{
    width: 960px;
    background-color: #FFEBF2;
    margin-bottom: 50px;
    position: relative;
    
}
.dialog_box::after{
    content: '';
    position: absolute;
    border-top: 30px solid #FFEBF2;
    border-right: 30px solid transparent;
    border-left: 0px solid transparent;
    border-bottom: 0px solid #FFEBF2;
    bottom: -30px;
    left: 80px;
}
.dialog_box p{
    color: #5a5a5a;
    line-height: 2;
    letter-spacing: 1.2px;
    padding: 30px 20px;
    font-style:italic;
}
.card{
    display: flex;
    align-items: center;
    position: relative;
    left: 50px;
}
.card h2{
    padding: 20px;
    font-size: 16px;
    font-weight: 200;
    line-height: 1.5;
}
.card span{
    display: block;
    font-size: 14px;
}
.card img{
    width: 100px;
    aspect-ratio: 1/1;
    vertical-align: middle;
}